<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <link rel="stylesheet" href="../../css/jquery.mCustomScrollbar.css">
    <title>视频播放</title>
    <style type="text/css">
        .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
            background-color: #ffd76d;
            /* 1st scrollbar dragger style... */
        }
        .mCSB_scrollTools .mCSB_draggerRail {
            width: 4px;
            background-color: #4fc177;
        }
        #mCSB_1 {
            background-color: #fff;
        }
        #mCSB_1_container {
            background-color: #fff;
        }
        .mCSB_inside > .mCSB_container {
            margin-right: 0;
        }

    </style>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-play-main">
    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">设计与发现课程学习页面</a></li>
                <li><a href="#">课程播放</a></li>
                <li class="active">课后作业</li>
            </ol>
        </div>
        <div class="row">
            <div class="col-md-7 fc-hw-box" id="home-work-detail">
                <!--分数-->
                <div class="hw-result">
                    <div id="progress">

                    </div>
                    <p> <span>共2题,</span><span>答对1题</span></p>
                    <p><a href="#" class="btn view-ana">查看答案解析</a><a href="#" class="btn next-course">学习下一课</a></p>
                </div>
                <!--分数end-->
                <!--答案解析-->
                <!--<div class="ans-analyse">
                    <h5>答案解析</h5>
                    <p>Acme Foodstuffs 公司遇到了一个为产品选材的问题。Acme决定生产一款盛热玉米汁用的新勺子。生产过程中，必须在玉米汁温度较高时（80℃），用勺子将其盛放到大瓶子中，且每次要连续使用一个半小时以上。解决此问题的材料需要考虑哪些属性？</p>
                    <button class="btn next-course">下一个课时</button>
                </div>-->
                <!--答案解析end-->

                <!--  课后题列表 -->
            <!--    <form class="form-horizontal">
                    <ul class="list-group">
                        <li class="list-group-item" id="1">
                            <h5>第一题(多选题)</h5>
                            <p class="hw-dsc">Acme Foodstuffs 公司遇到了一个为产品选材的问题。Acme决定生产一款盛热玉米汁用的新勺子。生产过程中，必须在玉米汁温度较高时（80℃），用勺子将其盛放到大瓶子中，且每次要连续使用一个半小时以上。解决此问题的材料需要考虑哪些属性？</p>
                            <ul class="list-group">
                                <li class="list-group-item hw-check-box hw-options">
                                    <label for="s-a">A.哈哈哈</label><input type="checkbox" name="s" id="s-a" style="display: none">
                                </li>
                                <li class="list-group-item hw-check-box hw-options">
                                    <label for="s-b">B.哈哈哈</label><input type="checkbox" name="s" id="s-b" style="display: none">
                                </li>

                                <li class="list-group-item hw-check-box hw-options">
                                    <label for="s-c">B.哈哈哈</label><input type="checkbox" name="s" id="s-c" style="display: none">
                                </li>
                                <li class="list-group-item hw-check-box hw-options">
                                    <label for="s-d">B.哈哈哈</label><input type="checkbox" name="s" id="s-d" style="display: none">
                                </li>
                            </ul>

                        </li>
                        <li class="list-group-item" id="2">
                            <h5>第二题(单选题)</h5>
                            <p class="hw-dsc">Acme Foodstuffs 公司遇到了一个为产品选材的问题。Acme决定生产一款盛热玉米汁用的新勺子。生产过程中，必须在玉米汁温度较高时（80℃），用勺子将其盛放到大瓶子中，且每次要连续使用一个半小时以上。解决此问题的材料需要考虑哪些属性？</p>
                            <ul class="list-group">
                                <li class="list-group-item hw-radio-box hw-options">
                                    <label for="t-a">A.哈哈哈</label><input type="radio" name="1" id="t-a" style="display: none">
                                </li>
                                <li class="list-group-item hw-radio-box hw-options">
                                    <label for="t-b">B.哈哈哈</label><input type="radio" name="1" id="t-b" style="display: none">
                                </li>
                                <li class="list-group-item hw-radio-box hw-options">
                                    <label for="t-c">B.哈哈哈</label><input type="radio" name="1" id="t-c" style="display: none">
                                </li>
                                <li class="list-group-item hw-radio-box hw-options">
                                    <label for="t-d">B.哈哈哈</label><input type="radio" name="1" id="t-d" style="display: none">
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <button class="btn hw-submit" type="button">提交</button>
                </form>-->
                <!--  课后题列表 end-->
            </div>
            <div class="col-md-5">
                <div class="col-sm-12 source-de-tr">
                    <a class="label share-btn">分享</a>
                    <ul class="share-list">
                        <li class="o"><a href="#" style="display: inline-block;width: 100%;height: 100%" onclick="shareToQQ(event)"></a></li>
                        <li class="tw"><a href="#" class="jiathis_button_weixin" style="display: inline-block;width: 100%;height: 100%"></a></li>
                        <li class="th"><a href="#" class="jiathis_button_qzone" style="display: inline-block;width: 100%;height: 100%"></a></li>
                        <li class="fo"><a href="#" class="jiathis_button_tsina" style="display: inline-block;width: 100%;height: 100%"></a></li>
                        <li class="fi"><a href="#" class="jiathis_button_douban" style="display: inline-block;width: 100%;height: 100%"></a></li>
                    </ul>
                    <p><span>课程名称：设计与发现</span><br>讲师：Dwayne Davis<br>正在学习：2 课时 / 10 课时</p>
                </div>
                <div class="col-sm-12 source-flow-b">
                    <div class="source-flow-box">
                        <h4>课时列表</h4>
                        <ul class="list-group">
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>

                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/mediaControl.js"></script>
<script src="../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../js/radialIndicator.min.js"></script>
<script type="text/javascript">

    $('#progress').radialIndicator({
        barWidth: 10,
        initValue: 40,
        barColor: '#4fc177',
        radius: 80,
        minValue: 0,
        maxValue: 100,
        format: '## 分'
    });
    //分享到豆瓣
    function shareToDouban(event){
        event.preventDefault();
        var _shareUrl = 'http://shuo.douban.com/!service/share?';
        _shareUrl += 'href=' + encodeURIComponent(location.href);    //分享的链接
        _shareUrl += '&name=' + encodeURIComponent(document.title);    //分享的标题
        window.open(_shareUrl,'_blank','width='+ 1000 +',height='+ 1000 +',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
    }
    // 分享到QQ
    function shareToQQ(event){
        event.preventDefault();
        var p = {
            url:location.href, /*获取URL，可加上来自分享到QQ标识，方便统计*/
            desc:'', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
            title:'', /*分享标题(可选)*/
            summary:'', /*分享摘要(可选)*/
            pics:'', /*分享图片(可选)*/
            flash: '', /*视频地址(可选)*/
            site:'', /*分享来源(可选) 如：QQ分享*/
            style:'201',
            width:32,
            height:32
        };
        var s = [];
        for(var i in p){
            s.push(i + '=' + encodeURIComponent(p[i]||''));
        }
        s.join('&')
        var _shareUrl = 'http://connect.qq.com/widget/shareqq/index.html?';
        _shareUrl +=   s.join('&');
        console.log(_shareUrl);
        window.open(_shareUrl,'_blank');
    }
</script>
<script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".source-flow-box .list-group").mCustomScrollbar();
            $(".fc-hw-box").mCustomScrollbar();
        });
    })(jQuery);
    $(function(){
        $(".source-detail-p1 .media-body a").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".ques-list li").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".user-agree").click(function(){
            $(this).toggleClass("like");
            if($(this).hasClass("like")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);
            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".user-thanks").click(function() {
            $(this).toggleClass("collect");
            if($(this).hasClass("collect")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);

            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".q-d-box").click(function(){
            $(this).toggleClass("active");
            $that = $(this).find(".same-q-count");
            if($(this).hasClass("active")) {
                $that.text(parseInt($that.text()) + 1);
            } else {
                $that.text(parseInt($that.text()) - 1);
            }
        });
        $(".source-key-box .list-group-item").hover(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("click").siblings().removeClass("click");
        });

        $(".view-all-ans").click(function() {
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            if($(this).hasClass("none-ans")) {
                return
            }
            $(this).parent().parent().parent().find(".hid-ans").slideDown();
        })
        /*  mouse leave */
        $(".source-key-box a ").mouseleave(function(){
            $(this).removeClass("click");
        });

        $(".ans-btn").click(function(){
            $(this).siblings().remove();
            $(this).fadeOut();
            $(this).parent().next().show().slideDown();
            $(this).parent().parent().parent().show().find(".hid-ans").slideDown();
            $(this).parent().parent().find(".hid-form .form-control").fadeIn();
            $(this).parent().parent().find(".text-right").fadeIn();
        });

        $(".cancel-ans").click(function(){
            $(this).parent().fadeOut();  /*隐藏div.text-right*/
            $(this).parent().parent().find('.form-control').fadeOut(); /*隐藏表单*/
            console.log( $(this).parent().parent().parent());
            $(this).parent().parent().parent().find(".hid-head .ans-btn").fadeIn();/* 显示头部 */
            $(this).parent().parent().parent().find(".hid-form").fadeOut();
        });


        $(".v-cover-icon").click(function () {
            $(this).parent().hide();
            $(".prog-bar-point").removeClass("video-start-point");
            video.play();
            controlBind();
        });
        function controlBind() {
            $(".video-control-wrap").fadeIn();
            $(".source-box").hover(function() {
                $(".video-control-wrap").fadeIn();
            }, function () {
                $(".video-control-wrap").fadeOut();
            });
        }

        $(".share-btn").hover(function() {
            $(this).addClass("share-clicked");
            $(".share-list").show();
        });
        $(".share-list").mouseleave(function(){
            $(this).hide();
            $(".share-btn").removeClass("share-clicked");
        });



          $(".hw-check-box label").click(function () {
              $(this).parent().toggleClass("checked");
          })
        $(".hw-radio-box label").click(function () {
            $(this).parent().addClass("checked").siblings().removeClass("checked");
        })

    });

</script>

</body>
</html>